<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="期数" prop="issue">
                <el-input v-model="queryParams.issue" placeholder="请输入期数" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                    v-hasPermi="['system:record:add']">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
                    v-hasPermi="['system:record:edit']">修改</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
                    v-hasPermi="['system:record:remove']">删除</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                    v-hasPermi="['system:record:export']">导出</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row> -->
        <el-divider content-position="left">近100场统计</el-divider>
        <el-row :gutter="20">
            <el-col :span="6" v-for="item in totalData" :key="item.killer">
                <div>
                    <el-statistic :title="getRoomName(item.killer)">
                        <template slot="formatter">
                            {{ item.count }}
                        </template>
                    </el-statistic>
                </div>
            </el-col>
        </el-row>

        <el-table v-loading="loading" :data="recordList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="期数" align="center" prop="issue" />
            <el-table-column label="总投入数" align="center" prop="totalMedal" />
            <el-table-column label="总用户数" align="center" prop="userCount" />
            <el-table-column label="被噶房间" align="center" prop="killer">
                <template slot-scope="scope">
                    {{ getRoomName(scope.row.killer) }}
                </template>
            </el-table-column>
            <!-- <el-table-column label="房间号" align="center" prop="roomNumber1" /> -->
            <el-table-column label="杂物间人数" align="center" prop="userCount1">
            </el-table-column>
            <el-table-column label="杂物间宝石数量" align="center" prop="userTotalMedal1">
                <template slot-scope="scope">
                    <div :class="killNum(scope.row.killer, scope.row.roomNumber1) ? 'kill-class' : ''">
                        <template v-if="getMinData(scope.row, scope.row.userTotalMedal1)">
                            <span :class="getMinData(scope.row, scope.row.userTotalMedal1) ? 'min-class' : ''">
                                {{ scope.row.userTotalMedal1 }}
                            </span>
                        </template>
                        <template v-else-if="getMaxData(scope.row, scope.row.userTotalMedal1)">
                            <span :class="getMaxData(scope.row, scope.row.userTotalMedal1) ? 'max-class' : ''">
                                {{ scope.row.userTotalMedal1 }}
                            </span>
                        </template>
                        <template v-else>
                            <span>
                                {{ scope.row.userTotalMedal1 }}
                            </span>
                        </template>
                    </div>

                </template>
            </el-table-column>
            <el-table-column label="休息室人数" align="center" prop="userCount2">
            </el-table-column>
            <el-table-column label="休息室宝石数量" align="center" prop="userTotalMedal2">
                <template slot-scope="scope">
                    <div :class="killNum(scope.row.killer, scope.row.roomNumber2) ? 'kill-class' : ''">
                        <template v-if="getMinData(scope.row, scope.row.userTotalMedal2)">
                            <span :class="getMinData(scope.row, scope.row.userTotalMedal2) ? 'min-class' : ''">
                                {{ scope.row.userTotalMedal2 }}
                            </span>
                        </template>
                        <template v-else-if="getMaxData(scope.row, scope.row.userTotalMedal2)">
                            <span :class="getMaxData(scope.row, scope.row.userTotalMedal2) ? 'max-class' : ''">
                                {{ scope.row.userTotalMedal2 }}
                            </span>
                        </template>
                        <template v-else>
                            <span>
                                {{ scope.row.userTotalMedal2 }}
                            </span>
                        </template>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label=" 厂长室人数" align="center" prop="userCount3">
            </el-table-column>
            <el-table-column label="厂长室宝石数量" align="center" prop="userTotalMedal3">
                <template slot-scope="scope">
                    <div :class="killNum(scope.row.killer, scope.row.roomNumber3) ? 'kill-class' : ''">
                        <template v-if="getMinData(scope.row, scope.row.userTotalMedal3)">
                            <span :class="getMinData(scope.row, scope.row.userTotalMedal3) ? 'min-class' : ''">
                                {{ scope.row.userTotalMedal3 }}
                            </span>
                        </template>
                        <template v-else-if="getMaxData(scope.row, scope.row.userTotalMedal3)">
                            <span :class="getMaxData(scope.row, scope.row.userTotalMedal3) ? 'max-class' : ''">
                                {{ scope.row.userTotalMedal3 }}
                            </span>
                        </template>
                        <template v-else>
                            <span>
                                {{ scope.row.userTotalMedal3 }}
                            </span>
                        </template>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="谈话室人数" align="center" prop="userCount4">
            </el-table-column>
            <el-table-column label="谈话室宝石数量" align="center" prop="userTotalMedal4">
                <template slot-scope="scope">
                    <div :class="killNum(scope.row.killer, scope.row.roomNumber4) ? 'kill-class' : ''">
                        <template v-if="getMinData(scope.row, scope.row.userTotalMedal4)">
                            <span :class="getMinData(scope.row, scope.row.userTotalMedal4) ? 'min-class' : ''">
                                {{ scope.row.userTotalMedal4 }}
                            </span>
                        </template>
                        <template v-else-if="getMaxData(scope.row, scope.row.userTotalMedal4)">
                            <span :class="getMaxData(scope.row, scope.row.userTotalMedal4) ? 'max-class' : ''">
                                {{ scope.row.userTotalMedal4 }}
                            </span>
                        </template>
                        <template v-else>
                            <span>
                                {{ scope.row.userTotalMedal4 }}
                            </span>
                        </template>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="洗衣房人数" align="center" prop="userCount5">
            </el-table-column>
            <el-table-column label="洗衣房宝石数量" align="center" prop="userTotalMedal5">
                <template slot-scope="scope">
                    <div :class="killNum(scope.row.killer, scope.row.roomNumber5) ? 'kill-class' : ''">
                        <template v-if="getMinData(scope.row, scope.row.userTotalMedal5)">
                            <span :class="getMinData(scope.row, scope.row.userTotalMedal5) ? 'min-class' : ''">
                                {{ scope.row.userTotalMedal5 }}
                            </span>
                        </template>
                        <template v-else-if="getMaxData(scope.row, scope.row.userTotalMedal5)">
                            <span :class="getMaxData(scope.row, scope.row.userTotalMedal5) ? 'max-class' : ''">
                                {{ scope.row.userTotalMedal5 }}
                            </span>
                        </template>
                        <template v-else>
                            <span>
                                {{ scope.row.userTotalMedal5 }}
                            </span>
                        </template>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="工作室人数" align="center" prop="userCount6">
            </el-table-column>
            <el-table-column label="工作室宝石数量" align="center" prop="userTotalMedal6">
                <template slot-scope="scope">
                    <div :class="killNum(scope.row.killer, scope.row.roomNumber6) ? 'kill-class' : ''">
                        <template v-if="getMinData(scope.row, scope.row.userTotalMedal6)">
                            <span :class="getMinData(scope.row, scope.row.userTotalMedal6) ? 'min-class' : ''">
                                {{ scope.row.userTotalMedal6 }}
                            </span>
                        </template>
                        <template v-else-if="getMaxData(scope.row, scope.row.userTotalMedal6)">
                            <span :class="getMaxData(scope.row, scope.row.userTotalMedal6) ? 'max-class' : ''">
                                {{ scope.row.userTotalMedal6 }}
                            </span>
                        </template>
                        <template v-else>
                            <span>
                                {{ scope.row.userTotalMedal6 }}
                            </span>
                        </template>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="茶水间人数" align="center" prop="userCount7">
            </el-table-column>
            <el-table-column label="茶水间宝石数量" align="center" prop="userTotalMedal7">
                <template slot-scope="scope">
                    <div :class="killNum(scope.row.killer, scope.row.roomNumber7) ? 'kill-class' : ''">
                        <template v-if="getMinData(scope.row, scope.row.userTotalMedal7)">
                            <span :class="getMinData(scope.row, scope.row.userTotalMedal7) ? 'min-class' : ''">
                                {{ scope.row.userTotalMedal7 }}
                            </span>
                        </template>
                        <template v-else-if="getMaxData(scope.row, scope.row.userTotalMedal7)">
                            <span :class="getMaxData(scope.row, scope.row.userTotalMedal7) ? 'max-class' : ''">
                                {{ scope.row.userTotalMedal7 }}
                            </span>
                        </template>
                        <template v-else>
                            <span>
                                {{ scope.row.userTotalMedal7 }}
                            </span>
                        </template>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="音乐室人数" align="center" prop="userCount8">
            </el-table-column>
            <el-table-column label="音乐室宝石数量" align="center" prop="userTotalMedal8">
                <template slot-scope="scope">
                    <div :class="killNum(scope.row.killer, scope.row.roomNumber8) ? 'kill-class' : ''">
                        <template v-if="getMinData(scope.row, scope.row.userTotalMedal8)">
                            <span :class="getMinData(scope.row, scope.row.userTotalMedal8) ? 'min-class' : ''">
                                {{ scope.row.userTotalMedal8 }}
                            </span>
                        </template>
                        <template v-else-if="getMaxData(scope.row, scope.row.userTotalMedal8)">
                            <span :class="getMaxData(scope.row, scope.row.userTotalMedal8) ? 'max-class' : ''">
                                {{ scope.row.userTotalMedal8 }}
                            </span>
                        </template>
                        <template v-else>
                            <span>
                                {{ scope.row.userTotalMedal8 }}
                            </span>
                        </template>

                    </div>
                </template>
            </el-table-column>

            <!-- <el-table-column label="房间名" align="center" prop="roomName8" /> -->
            <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                        v-hasPermi="['system:record:edit']">修改</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                        v-hasPermi="['system:record:remove']">删除</el-button>
                </template>
            </el-table-column> -->
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />
    </div>
</template>

<script>
import { listRecord, getRecord, listTotal } from "@/api/record";

export default {
    name: "Record",
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 【请填写功能名称】表格数据
            recordList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                issue: null,
                totalMedal: null,
                userCount: null,
                killer: null,
                roomNumber1: null,
                userCount1: null,
                userTotalMedal1: null,
                roomName1: null,
                roomNumber2: null,
                userCount2: null,
                userTotalMedal2: null,
                roomName2: null,
                roomNumber3: null,
                userCount3: null,
                userTotalMedal3: null,
                roomName3: null,
                roomNumber4: null,
                userCount4: null,
                userTotalMedal4: null,
                roomName4: null,
                roomNumber5: null,
                userCount5: null,
                userTotalMedal5: null,
                roomName5: null,
                roomNumber6: null,
                userCount6: null,
                userTotalMedal6: null,
                roomName6: null,
                roomNumber7: null,
                userCount7: null,
                userTotalMedal7: null,
                roomName7: null,
                roomNumber8: null,
                userCount8: null,
                userTotalMedal8: null,
                roomName8: null
            },
            totalData: []
        };
    },
    created() {
        this.getList();

    },
    methods: {
        getListTotal() {
            listTotal({
                count: 100,
                issue: this.recordList[0].issue
            }).then(res => {
                this.totalData = res.rows
            })
        },
        killNum(killNum, data) {
            return killNum == data
        },
        getMaxData(list, data) {
            const minData = Math.max(list["userTotalMedal1"], list["userTotalMedal2"], list["userTotalMedal3"], list["userTotalMedal4"], list["userTotalMedal5"], list["userTotalMedal6"], list["userTotalMedal7"], list["userTotalMedal8"])
            return minData == data
        },
        getMinData(list, data) {
            const minData = Math.min(list["userTotalMedal1"], list["userTotalMedal2"], list["userTotalMedal3"], list["userTotalMedal4"], list["userTotalMedal5"], list["userTotalMedal6"], list["userTotalMedal7"], list["userTotalMedal8"])
            return minData == data
        },
        getRoomName(data) {
            const name = {
                1: "杂物间",
                2: "休息室",
                3: "厂长室",
                4: "谈话室",
                5: "洗衣房",
                6: "工作室",
                7: "茶水间",
                8: "音乐室",
            }
            return name[data]
        },
        /** 查询【请填写功能名称】列表 */
        getList() {
            this.loading = true;
            listRecord(this.queryParams).then(response => {
                this.recordList = response.rows;
                this.total = response.total;
                this.loading = false;
                this.getListTotal();
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.guid)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
    }
};
</script>
<style lang="scss" scoped>
.min-class {
    background-color: aquamarine;
}

.kill-class {
    background-color: red;
}

.max-class {
    background-color: blueviolet;
    color: #fff;
}
</style>